<template>
    <!--顶部组件 start-->
      <TopHeader/>
    <!--顶部组件 end-->
    <!--搜索组件 start-->
      <div class="edu-room-nav">
        <Search/>
      </div>
    <!--搜索组件 end-->
    <!--中间内容 start-->
      <div class="edu-container edu-data">
        <el-card class="edu-data-intro">
          <div class="login-content">
            <!--登录 start-->
          <div class="login-bg">
            <div class="login-cont">
              <div class="form-box">
                <el-form ref="formRef" :rules="rules" :model="memberForm">
                  <legend>会员登录</legend>
                  <el-form-item prop="phone">
                    <el-input v-model="memberForm.phone" placeholder="请输入手机号">
                      <template #prefix>
                        <el-icon><Iphone /></el-icon>
                      </template>
                    </el-input>
                  </el-form-item>

                  <el-form-item prop="password">
                    <el-input type="password" v-model="memberForm.password" placeholder="请输入登录密码">
                      <template #prefix>
                        <el-icon><Lock /></el-icon>
                      </template>
                    </el-input>
                  </el-form-item>

                  <el-form-item >
                    <router-link to="/edu/register"><a>注册</a></router-link>
                  </el-form-item>

                  <el-form-item>
                    <el-button @click="login(formRef)" :loading="subLoading" color="#5e8eba" style="width: 100%">立即登入</el-button>
                  </el-form-item>

                </el-form>
              </div>
            </div>
          </div>
            <!--登录 end-->
          </div>
        </el-card>
      </div>
    <!--中间内容 end-->
    <!--底部组件 start-->
      <Footer/>
    <!--底部组件 end-->
    </template>

    <script setup lang="ts">
    import TopHeader from "@/views/edu/comm/TopHeader.vue"
    import Search from "@/views/edu/comm/Search.vue"
    import Footer from "@/views/edu/comm/Footer.vue"
    import {ref,reactive} from 'vue'
    import {useRouter } from 'vue-router'
    import {useMemberStore} from "@/store/modules/member"
    import { ElMessage,FormInstance,FormRules } from 'element-plus'
    import {loginApi} from "@/api/edu/index"
    // 表单实例对象
    const formRef = ref<FormInstance>()
    // 表单规则对象
    const rules = reactive<FormRules>({
      phone: [{required: true,message:'手机号不能为空',trigger: 'blur'}],
      password: [{required: true,message: '登录密码不能为空',trigger: 'blur'}]
    })
    // 获取路由对象
    const router = useRouter()
    // 获取会员在pinia对象
    const memberStore = useMemberStore()
    // 提交按钮状态
    const subLoading = ref(false)
    // 表单数据对象
    const memberForm = ref({
      phone: '19948765606',
      password: '123456'
    })
    // 提交登录表单
    const login = async (formEl: FormInstance | undefined)=> {
      if(!formEl)return
      await formEl.validate(async (valid,fields)=> {
        subLoading.value = true
        if(valid){
          const { data } = await loginApi(memberForm.value)
          if(data.status === 200){
            // 设置会员token
            memberStore.setMemberToken(data.result.memberToken)
            // 登录会员信息
            memberStore.setMemberInfo({
              memberIcon: data.result.memberIcon,
              nickname: data.result.nickname
            })
            ElMessage.success(data.message)
            // 跳转首页
            router.push({
              path: '/index'
            })
          }else {
            ElMessage.error(data.message)
          }
        }else {
          ElMessage.error('提交失败，你还有未填写的项！')
        }
      })
      subLoading.value = false
    }
    </script>

    <style scoped>
    .edu-container {
      width: 1350px;
      padding: 0;
      position: relative;
      margin: 0 auto;
      box-sizing: border-box;
    }

    .edu-data-intro {
      margin: 30px 0;
      background-color: #fff;
    }

    .login-content .login-bg {
      width: 100%;
      background: url(@/assets/edu/images/load_bg.jpg) no-repeat;
      background-size: cover;
    }

    .login-content .login-bg .login-cont {
      height: 772px;
      position: relative;
    }

    .login-content .login-bg .login-cont .form-box {
      width: 300px;
      height: 390px;
      border: 1px solid #d9dadc;
      background: #fff;
      position: absolute;
      top: 196px;
      right: 90px;
      padding: 0 30px;
    }
    .login-content .login-bg .login-cont .form-box legend {
      font-size: 20px;
      color: #323232;
      text-align: center;
      padding: 50px 0;
    }

    </style>
